<template>
  <div class="app-container">
    <el-form
      ref="formRef"
      :model="user"
      :rules="validateRules"
      label-width="120px"
    >
      <el-form-item label="用户名" prop="yhm">
        <el-input v-model="user.yhm" />
      </el-form-item>

      <el-form-item v-if="!user.id" label="用户密码" prop="mm">
        <el-input v-model="user.mm" />
      </el-form-item>

      <el-form-item label="性别" prop="xb">
        <el-radio-group v-model="user.xb" class="ml-4">
          <el-radio label="男" size="large">男</el-radio>
          <el-radio label="女" size="large">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属公司" prop="gsid">
        <el-select
          v-model="user.gsid"
          :disabled="gsDisabled"
          class="m-2"
          placeholder="请选择公司"
          size="large"
        >
          <el-option
            v-for="item in companyList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="角色类型" prop="jsid" v-if="userinfo&&userinfo.yhlx==2">
        <el-select
          v-model="user.jsid"
          class="m-2"
          placeholder="请选择类型"
          size="large"
        >
          <el-option
            v-for="item in jsList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="籍贯">
        <el-select
          v-model="user.jg"
          class="m-2"
          placeholder="请选择籍贯"
          size="large"
        >
          <el-option
            v-for="item in areaList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出生年月">
        <el-date-picker
          v-model="user.csny"
          type="date"
          placeholder="请选择"
          :size="default"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="所属班组">
        <el-input v-model="user.ssbz" />
      </el-form-item>
      <el-form-item label="职务">
        <el-input v-model="user.zw" />
      </el-form-item>
      <el-form-item label="微信号" prop="wx">
        <el-input v-model="user.wx" />
      </el-form-item>
      <el-form-item label="手机号码" prop="sjhm">
        <el-input v-model="user.sjhm" />
      </el-form-item>
      <el-form-item label="备用手机号码" prop="bysjhm">
        <el-input v-model="user.bysjhm" />
      </el-form-item>
      <el-form-item label="学历">
        <el-select
          v-model="user.xl"
          class="m-2"
          placeholder="请选择学历"
          size="large"
        >
          <el-option
            v-for="item in xlList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="毕业院校">
        <el-input v-model="user.byyx" />
      </el-form-item>
      <el-form-item label="所学专业">
        <el-input v-model="user.sxzy" />
      </el-form-item>
      <el-form-item label="参加工作时间">
        <el-date-picker
          v-model="user.cjgzsj"
          type="date"
          placeholder="Pick a day"
          :size="default"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="user.bz" />
      </el-form-item>

      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, watchEffect } from 'vue'
import userApi from '@/api/acl/user'
import { getCompanyListApi } from '@/api/company'
import { ElMessage, FormInstance } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import useCloseTag from '@/hooks/useCloseTag'
import { useUserinfo } from '@/components/Avatar/hooks/useUserinfo'
import { use } from 'echarts'

const { userinfo } = useUserinfo()
const gsDisabled = ref(false)
const { closeTag } = useCloseTag()
const formRef = ref<FormInstance>()
const router = useRouter()
const route = useRoute()
const defaultForm = {
  id: null,
  gh: null,
  yhm: '',
  mm: '',
  gsid: '',
  xb: '',
  jg: '',
  csny: null,
  ssbz: '',
  zw: '',
  wx: '',
  sjhm: '',
  bysjhm: '',
  xl: '',
  byyx: '',
  sxzy: '',
  cjgzsj: null,
  bz: '',
  jsid:null,
}
const jsList =[
  {value:"1",label:"坐席"},
  {value:"2",label:"语音"},
  {value:"3",label:"机器人"}
]

const validatePass = (rule, value, callback) => {
  if (value.length < 6) {
    callback(new Error('密码不能小于6位'))
  }else if(value.length>16){
    callback(new Error('密码不能大于16位'))
  } else {
    callback()
  }
}
const validateYhm = (rule, value, callback) => {
  if(value==null||value===""){
    callback(new Error('用户名不能为空！！！'))
  }else{
    userApi.nameIsExist(value).then(({data})=>{
    if(data){
      callback(new Error('该用户名已存在！！！'))
    }else{
      callback()
    }
  })
  }

  
}

// 定义验证规则
const validateRules = {
  yhm: [{ required: true, trigger: 'blur',validator: validateYhm}],
  mm: [{ required: true, trigger: 'blur', validator: validatePass }],
  xb: [{ required: true, trigger: 'blur', message: '性别未选择' }],
  gsid: [{ required: true, trigger: 'blur', message: '公司不能为空' }],
  sjhm: [
    { required: false, message: '请输入手机号码', trigger: 'blur' },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur',
    },
  ],
  bysjhm: [
    { required: false, message: '请输入手机号码', trigger: 'blur' },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur',
    },
  ],
}

// 定义下拉框选项
const xlList = [
  {
    value: '高中及以下',
    label: '高中及以下',
  },
  {
    value: '专科',
    label: '专科',
  },
  {
    value: '本科',
    label: '本科',
  },
  {
    value: '研究生',
    label: '研究生',
  },
  {
    value: '硕士',
    label: '硕士',
  },
  {
    value: '博士及以上',
    label: '博士及以上',
  },
]

const areaList = [
  {
    value: '北京',
    label: '北京',
  },
  {
    value: '天津',
    label: '天津',
  },
  {
    value: '河北',
    label: '河北',
  },
  {
    value: '山西',
    label: '山西',
  },
  {
    value: '内蒙古',
    label: '内蒙古',
  },
  {
    value: '辽宁',
    label: '辽宁',
  },
  {
    value: '吉林',
    label: '吉林',
  },
  {
    value: '黑龙江',
    label: '黑龙江',
  },
  {
    value: '上海',
    label: '上海',
  },
  {
    value: '江苏',
    label: '江苏',
  },
  {
    value: '浙江',
    label: '浙江',
  },
  {
    value: '安徽',
    label: '安徽',
  },
  {
    value: '福建',
    label: '福建',
  },
  {
    value: '江西',
    label: '江西',
  },
  {
    value: '山东',
    label: '山东',
  },
  {
    value: '河南',
    label: '河南',
  },
  {
    value: '湖北',
    label: '湖北',
  },
  {
    value: '湖南',
    label: '湖南',
  },
  {
    value: '广东',
    label: '广东',
  },
  {
    value: '广西',
    label: '广西',
  },
  {
    value: '海南',
    label: '海南',
  },
  {
    value: '重庆',
    label: '重庆',
  },
  {
    value: '四川',
    label: '四川',
  },
  {
    value: '贵州',
    label: '贵州',
  },
  {
    value: '云南',
    label: '云南',
  },
  {
    value: '西藏',
    label: '西藏',
  },
  {
    value: '陕西',
    label: '陕西',
  },
  {
    value: '甘肃',
    label: '甘肃',
  },
  {
    value: '青海',
    label: '青海',
  },
  {
    value: '宁夏',
    label: '宁夏',
  },
  {
    value: '新疆',
    label: '新疆',
  },
  {
    value: '台湾',
    label: '台湾',
  },
  {
    value: '香港',
    label: '香港',
  },
  {
    value: '澳门',
    label: '澳门',
  },
  {
    value: '国外',
    label: '国外',
  },
]

// 获取公司列表数据
const companyList = ref([])
getCompanyListApi().then(res => {
  companyList.value = res.data
})

// 创建响应式对象
const user = ref(defaultForm)

// 创建可响应引用类型变量
const saveBtnDisabled = ref(false)

// 定义方法
const fetchDataById = id => {
  userApi.getById(id).then(response => {
    user.value = response.data
  })
}

const saveOrUpdate = () => {
  formRef.value.validate(valid => {
    if (valid) {
      saveBtnDisabled.value = true // 防止表单重复提交
      if (!user.value.id) {
        saveData()
      } else {
        updateData()
      }
    }
  })
}

const saveData = () => {
  userApi.save(user.value).then(response => {
    ElMessage({
      type: 'success',
      message: "添加成功！！！",
    })
    closeTag.value()
    // router.push({ path: '/acl/user/list' })
  })
}

const updateData = () => {
  // 手动封装修改数据
  userApi
    .updateById({
      id: user.value.id,
      gh: user.value.gh,
      yhm: user.value.yhm,
      gsid: user.value.gsid,
      xb: user.value.xb,
      jg: user.value.jg,
      csny: user.value.csny,
      ssbz: user.value.ssbz,
      zw: user.value.zw,
      wx: user.value.wx,
      sjhm: user.value.sjhm,
      bysjhm: user.value.bysjhm,
      xl: user.value.xl,
      byyx: user.value.byyx,
      sxzy: user.value.sxzy,
      cjgzsj: user.value.cjgzsj,
      bz: user.value.bz,
      jsid:user.value.jsid
    })
    .then(response => {
      ElMessage({
        type: 'success',
        message: response.message,
      })
      closeTag.value()
      // router.push({ path: '/acl/user/list' })
    })
}
// 监听器
watchEffect(() => {
  if (route.params.id) {
    fetchDataById(route.params.id)
    gsDisabled.value = true // 不能改变公司管理员的所属公司
  } else {
    // 公司管理员添加用户，那么用户的公司id肯定和管理员同一个
    if (userinfo.value.yhlx == 2) {
      console.log('这是一个添加操作')
      user.value.gsid = userinfo.value.gsId
      gsDisabled.value = true // 不能改变公司
    } else {
      gsDisabled.value = false
    }
  }
})
</script>
